!
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        li {
            list-style: none;
        }

        #div1 {
            width: 850px;
            height: 500px;
            margin: 50px auto;
            overflow: hidden;
            position: relative;
        }


        #div1 ul {

            /* height: 500px; */
            position: absolute;
            left: 0;
            top: 0;
        }


        #div1 ul li {
            width: 850px;
            height: 500px;
            z-index: 0;
            float: left;
        }

        #div1 ul li.ac {
            z-index: 5;
            opacity: 1;
        }

        #div1 ol {
            position: absolute;
            right: 10%;
            bottom: 10px;
            z-index: 6
        }

        #div1 ol li {
            width: 20px;
            height: 20px;
            background: #fff;
            margin-left: 5px;
            float: left;
            line-height: 20px;
            text-align: center;
            cursor: pointer;
        }

        #div1 ol li.ac {
            background: red;
            color: #fff;
        }

        #div1>a {
            text-decoration: none;
            position: absolute;
            left: 50%;
            margin-top: -10px;
            height: 40px;
            line-height: 32px;
            text-align: center;
            width: 40px;
            font-size: 40px;
            vertical-align: middle;
            color: #fff;
            background: rgba(0, 0, 0, 0.5);
            z-index: 6;
        }

        #goPrev {
            top: 0;
            transform: rotate(90deg);
        }

        #goNext {
            bottom: 0;
            transform: rotate(90deg);
        }

        img {
            width: 850px;
            height: 500px;
        }
    </style>
</head>

<body>
    <div id="div1">
        <ul>
            <li class="ac"><a href="javascript:alert(0);"><img src="1.jpg" /></a></li>
            <li><a href="javascript:alert(1);"><img src="2.jpg" /></a></li>
            <li><a href="javascript:alert(2);"><img src="3.jpg" /></a></li>
            <li><a href="javascript:alert(3);"><img src="4.jpg" /></a></li>
            <li><a href="javascript:alert(4);"><img src="5.jpg" /></a></li>
            <li class="ac"><a href="javascript:alert(0);"><img src="1.jpg" /></a></li>
        </ul>
        <ol>

        </ol>
        <a href="javascript:;" id="goPrev">&laquo;</a>
        <a href="javascript:;" id="goNext">&raquo;</a>
    </div>
    <script>
        var index = 0;
        var lastIndex = 0;
        var ismove = false;
        class Play {
            constructor() {
                this.div1 = document.querySelector('#div1')
                this.pre = document.querySelector('#goPrev')
                this.nex = document.querySelector('#goNext')
                this.ul = this.div1.querySelector('ul')
                this.imgs = this.div1.querySelectorAll('ul li')
                this.ol = this.div1.querySelector('ol')
                this.btns = null
                this.t = null
                this.rbtn()
                this.lbtn()
                this.auto()
                this.init()
                this.mousein()
                this.mouseout()
            }



            init() {
                var height = this.imgs[0].offsetHeight
                var len = this.imgs.length
                this.ul.style.height = len * height + 'px'

                for (var i = 0; i < len - 1; i++) {
                    var li = document.createElement('li');
                    li.innerHTML = i + 1;
                    this.ol.appendChild(li)
                    if (i === 0) {
                        li.className = 'ac'
                    }
                }
                this.btns = this.ol.querySelectorAll('li')
                console.log(this.btns.length)
                Array.from(this.btns).forEach((item, index) => {
                    item.onclick = () => {
                        if (!ismove) {
                            ismove = true
                            this.change(index)
                            //this.animate(this.ul, -index * div1.offsetWidth, 10)
                            this.move(index)
                        }
                    }
                })
            }

            change(i) {
                lastIndex = index
                index = i;
                this.btns[lastIndex].classList.remove('ac')
                this.btns[index].classList.add('ac')
                console.log('index:' + index)
                console.log('lastIndex:' + lastIndex)
            }


            lbtn() {
                this.pre.onclick = () => {
                    if (!ismove) {
                        ismove = true
                        lastIndex = index
                        index--;
                        //无限轮播 若当前图片是第一张，修改ul的位置到最后一张的位置
                        if (index < 0) {
                            index = this.imgs.length - 2;
                            //将ul回到最后一张的位置
                            this.ul.style.top = -(this.imgs.length - 1) * div1.offsetWidth + 'px'
                        }
                        console.log('lastIndex:' + lastIndex)
                        console.log('index:' + index)
                        //移动ul 移动距离为图片索引*ul父容器的offsetWidth
                        //this.animate(this.ul, -index * div1.offsetWidth, 10)
                        this.btns[lastIndex].classList.remove('ac')
                        this.btns[index].classList.add('ac')
                        this.move(index)
                    }
                }
            }


            rbtn() {
                this.nex.onclick = () => {
                    if (!ismove) {
                        ismove = true
                        lastIndex = index
                        index++;
                        //无限轮播 若当前图片是最后一张 将ul的位置修改到第一张位置
                        if (index === this.imgs.length - 1) {
                            index = 0;
                            this.move(this.imgs.length - 1, () => {
                                console.log(this.ul)
                                this.ul.style.top = "0px";
                            })
                            //this.ul.style.left = 0 + "px";
                            //this.animate(this.ul, -(this.imgs.length) * div1.offsetWidth, 10)
                        }
                        else {
                            this.move(index)
                        }
                        console.log('last:' + lastIndex)
                        console.log('index:' + index)
                        this.btns[lastIndex].classList.remove('ac')
                        this.btns[index].classList.add('ac')
                    }
                    //this.animate(this.ul, -index * div1.offsetWidth, 10)
                }
            }



            move(index, fn) {
                clearInterval(this.ul.timer)
                var start = this.ul.offsetTop
                var end = -index * this.imgs[0].offsetHeight
                this.ul.timer = setInterval(() => {
                    var distance = end - start;
                    var speed = distance > 0 ? Math.ceil(distance / 10) : Math.floor(distance / 10);
                    start += speed;
                    this.ul.style.top = start + 'px';
                    if (start === end) {
                        clearInterval(this.ul.timer)
                        ismove = false
                        fn && fn()
                    }
                }, 15)
            }

            auto() {
                this.t = setInterval(() => {
                    console.log(1)
                    this.nex.onclick()
                }, 1000)
            }

            mousein() {
                this.div1.onmouseenter = () => {
                    clearInterval(this.t)
                }
            }

            mouseout() {
                this.div1.onmouseleave = () => {
                    this.auto()
                }
            }

            /*animate(obj, distance, speed) {
                clearInterval(obj.timer)
                obj.timer = setInterval(() => {
                    var now = obj.offsetLeft;

                    var isLeft = now > distance ? true : false
                    if (isLeft) {
                        now -= 20;
                    }
                    else {
                        now += 20;
                    }


                    if (isLeft ? now > distance : now < distance) {
                        //console.log('y')
                        obj.style.left = now + "px";  //如果当前位置不是在目标位置则进行位置处理
                    } else {
                        clearInterval(obj.timer);
                        //console.log('n')
                        obj.style.left = distance + "px";
                    }
                    //ismove = false

                }, speed)

            }*/
        }

        var s = new Play()



    </script>
</body>

</html>